<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="css/leaflet.css"/>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/icons-extra.css"/>
    <link href="css/bootstrap.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/emergencyresponse.css">
    <!--<script type="text/javascript">-->
    <!--// H5 plus事件处理-->
    <!--function plusReady() {-->
    <!---->
    <!--//            var main = plus.webview.getWebviewById('HBuilder');//或者通过A页面id获取A页面对象-->
    <!--//            mui.fire(main, "pageflowrefresh" );//出发A页面的pageflowrefresh方法-->
    <!--//            var indexwebview=plus.webview.getWebviewById('HBuilder');-->
    <!--//            plus.webview.close(indexwebview);-->
    <!--}-->

    <!--if (window.plus) {-->
    <!--plusReady();-->
    <!--} else {-->
    <!--document.addEventListener('plusready', plusReady, false);-->
    <!--}-->
    <!--</script>-->
    <script src="js/mui.min.js"></script>
    <script src="js/mui.zoom.js"></script>
    <script src="js/mui.previewimage.js"></script>
    <script type="text/javascript" src="core/n2.js"></script>
    <script type="text/javascript" src="core/scopedef.js"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav zaihai_heard">
    <a class="mui-pull-right"><img src="images/redearthquake.png" class="img-responsive"
                                   style="width:24px;height: 24px;margin-top: 9px;"></a>
    <a class=" mui-icon mui-icon-left-nav mui-pull-left " id="return_yingji"></a>
    <a class="mui-pull-left" id="return_Index02">
        <img src="images/home@1x.png" style="width:26px;height: 26px;margin-top: 9px;" alt="">
    </a>
    <h1 class="mui-title">应急响应专题</h1>
</header>
<div class="bg-content" style="position:relative;">
    <div id="bg"></div>
    <!--<div style="position:absolute; z-index:2; left:10px; top:10px">-->
    <div class="mui-scroll-wrapper1"
         style="position:absolute; z-index:2; left:0px; top:0px;background: #FFFFFF;opacity: .8;height: 127px;width:100%;overflow: hidden;">
        <div class="mui-scroll" style="padding: 5px 10px 5px 10px;">
                                    <span class="title-earthquake">
                                    国家Ⅳ级救灾应急响应：新疆6.5级地震
                                    </span>
            <br></br>
            <span class="content-earthquake">
            	工作组成员: <span>方志勇 吴建安</span></br></br>
            	启动响应时间: <span>2015-7-3 12:00:00</span>
            </span>
        </div>

    </div>
    <ul class="pull-right">
        <!--<li id="ShousunfenleiBtn">
            <button type="button" class="btn-type1">
                <i class="btn-type1-img" id="img-btn-type1"></i>
            </button>
            <div id="secondPopover" class="mui-popover-btn">
                <div class="mui-popover-arrow mui-right"></div>
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <p class="work-member">工作组成员:<span>方志勇 吴建安</span></p>
                        <p class="work-time">启动响应时间:<span>2015-7-3 12:00:00</span></p>
                    </div>
                </div>

            </div>
        </li>-->
        <li id="excelDisplayBtn">
            <button class="btn-type2" type="button">
                <i class="btn-type2-img" id="img-btn-type2"></i>
            </button>
            <!--功能列表显示与隐藏	-->
            <div id="thirdPopover" class="mui-popover-btn ">
                <div class="mui-popover-arrow mui-right"></div>
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll ">
                        <div class="inline_block">
                            <span id="first-excel" class="mui-icon-extra mui-icon-extra-order first-file"></span>
                            <br>
                            <span class="text_center">07-03</span>
                        </div>
                        <div class="inline_block">
                            <span class="mui-icon-extra mui-icon-extra-order"></span>
                            <br>
                            <span class="text_center">07-04</span>
                        </div>
                        <div class="inline_block">
                            <span class="mui-icon-extra mui-icon-extra-order"></span>
                            <br>
                            <span class="text_center">07-05</span>
                        </div>
                        <div class="inline_block">
                            <span class="mui-icon-extra mui-icon-extra-order"></span>
                            <br>
                            <span class="text_center">07-06</span>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li id="GongnengfenleiBtn">
            <button class="btn-type" id="first-file" type="button">
                <i class="btn-type-img" id="img-btn-type"></i>
            </button>
            <!--功能列表显示与隐藏	-->
            <div id="firstPopover" class="mui-popover-btn ">
                <!--<div class="mui-popover-arrow mui-right"></div>-->
                <!--<div class="mui-scroll-wrapper">-->
                <!--<div class="mui-scroll ">-->
                <!--<span id="first-file" class="mui-icon-extra mui-icon-extra-order first-file"></span>-->
                <!--<span class="mui-icon-extra mui-icon-extra-order"></span>-->
                <!--<span class="mui-icon-extra mui-icon-extra-order"></span>-->
                <!--<span class="mui-icon-extra mui-icon-extra-order"></span>-->
                <!--</div>-->
                <!--</div>-->
            </div>
        </li>
    </ul>
    <div class="mypopover mui-popover">
        <div class="mypopover-content">
            <h4 class="townname">万宁市和乐镇</h4>
            <div class="Affectedtime"><span>时间:</span><span></span></div>
            <div class="Affectedcase"><span>灾情:</span><span></span></div>
            <div class="position-slider"></div>
            <div class="showindex">
                <span class="current-index">1</span>/
                <span class="total-index">4</span>
            </div>
        </div>
    </div>
</div>
<script src="js/echarts.js"></script>
<script src="js/leaflet.js"></script>
<!--<script src="js/proj4-compressed.js"></script>-->
<!--<script src="js/proj4leaflet.js"></script>-->
<script src="js/leaflet.ChineseTmsProviders.js"></script>
<!--proj4-compressed-->
<!--proj4-leaflet-->
<script src="js/tdtLayer.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="plugin/DZZT/disasterSituation.js"></script>
<script>
    mui.init({
//        preloadPages: [
//            {   //预加载
//                url: 'index.html',
//                id: 'index.html'
//            }, {
//                url: "yingjixiangying.html",
//                id: "yingjixiangying.html"//默认使用当前页面的url作为id
//            }
//        ]
    });
    //AroundCity('201507030907460782376065');
    mui.plusReady(function () {
//  	var wv=plus.webview.currentWebview();
//          wv.setStyle({'popGesture':'none'});
        // 获取所有Webview窗口
        var wvs = plus.webview.all();
        for (var i = 0; i < wvs.length; i++) {

            if (wvs[i].id == 'yingjixiangying.html') {
            	plus.webview.hide(wvs[i]);
                plus.webview.close(wvs[i]);
            }
            if (wvs[i].id == 'dizhen.html') {
            	plus.webview.hide(wvs[i]);
            	plus.webview.close(wvs[i]);
        	}
        }
        //跳转index页面
        document.getElementById("return_Index02").addEventListener('tap', function (event) {
            // 获取所有Webview窗口
            var index_id=plus.webview.getLaunchWebview().id;
            for (var i = 0; i < wvs.length; i++) {
                console.log('webview' + i + ': ' + wvs[i].getURL());
                console.log('webview' + i + ': ' + wvs[i].id);
                if (wvs[i].id != index_id) {
                    plus.webview.close(wvs[i]);
                }
            }
//            mui.back();
//          plus.webview.getLaunchWebview().show();
        }, false);
//        window.addEventListener('newsId', function (event) {
//
//            //获得事件参数
//            var id = event.detail.id;
//
//
//            console.log(id)
//
//
//            /*------------------灾区情况----------------*/
//            //周边城市烈度图       echart做的   留着备份
//            //intensityMap(id);
//
//            //房屋结构
//            //buildingStructure(id);
//
//            //周边城市表格
//            //AroundCity(id);
//
//            /*-----------------损失评估-----------------*/
//            //lossAssessment(id)
//
//            /*-----------------历史地震-----------------*/
//            //历史地震表格
//            //histories(id);
//            /*----------------usgs-------------------*/
//            //USGS图
//            //USGSph(id)
//        });

    });
    document.getElementById("return_yingji").addEventListener('tap', function (event) {
        mui.openWindow({
            url: 'yingjixiangying.html?yy',
            id: 'yingjixiangying.html',
            createNew:true,
            show: {
                autoShow: true,//页面loaded事件发生后自动显示，默认为true
                aniShow: 'pop-in',
                duration: '100'
            },
            styles: {
                popGesture: 'none',
                hardwareAccelerated: true
            },
            waiting: {
                autoShow: true
            }
        });
    }, false);
    //按钮点击功能分类
    var firstPopover = $('#firstPopover'),
//      secondPopover = $('#secondPopover'),
        thirdPopover = $('#thirdPopover'),
        btnTypeImg = $('.btn-type-img'),
//      btnType1Img = $('.btn-type1-img'),
        btnType2Img = $('.btn-type2-img');

    document.querySelector(".btn-type2").addEventListener("tap", function (e) {
        if (thirdPopover.hasClass('active-cont')) {
            thirdPopover.removeClass('active-cont');
            btnType2Img.css('backgroundPosition', '0 -82px');
        } else {
            thirdPopover.addClass('active-cont');
            btnType2Img.css('backgroundPosition', '0 -124px');
        }
        firstPopover.removeClass('active-cont');
//      secondPopover.removeClass('active-cont');
        btnTypeImg.css('backgroundPosition', '-37px -82px');
//      btnType1Img.css('backgroundPosition', '-296px -82px');
        e.stopPropagation();
    });

    document.querySelector(".btn-type").addEventListener("tap", function (e) {
//        if (firstPopover.hasClass('active-cont')) {
//            firstPopover.removeClass('active-cont');
//            btnTypeImg.css('backgroundPosition', '-40px -80px');
//        } else {
//            firstPopover.addClass('active-cont');
//            btnTypeImg.css('backgroundPosition', '-40px -120px');
//        }
//      secondPopover.removeClass('active-cont');
        thirdPopover.removeClass('active-cont');
//      btnType1Img.css('backgroundPosition', '-296px -82px');
        btnType2Img.css('backgroundPosition', '0 -82px');
        e.stopPropagation();
    });
//  document.querySelector(".btn-type1").addEventListener("tap", function (e) {
//      if (secondPopover.hasClass('active-cont')) {
//          secondPopover.removeClass('active-cont');
//          btnType1Img.css('backgroundPosition', '-296px -82px');
//      } else {
//          secondPopover.addClass('active-cont');
//          btnType1Img.css('backgroundPosition', '-296px -124px');
//      }
//      firstPopover.removeClass('active-cont');
//      thirdPopover.removeClass('active-cont');
//      btnTypeImg.css('backgroundPosition', '-37px -82px');
//      btnType2Img.css('backgroundPosition', '0 -82px');
//      e.stopPropagation();
//  });

    //创建弹窗函数
    function mypopbox() {
        mui('.mypopover').popover('show');
        //获得slider插件对象
        var gallery1 = mui('.mui-slider');
        gallery1.slider({
            interval: 0//自动轮播周期，若为0则不自动播放，默认为0；
        });
        document.querySelector('.mui-slider').addEventListener('slide', function (event) {
            //注意slideNumber是从0开始的；
            document.getElementsByClassName("current-index")[0].innerText = event.detail.slideNumber + 1;
//          console.log(event.detail.slideNumber);
        });
    }

    //设备高度
    var deviceHeight = $(window).height();
    //根据不同的终端尺寸确定不同的scroll尺寸

    //阻止默认事件
    (function makesureSize() {
    })();
    document.querySelector("#thirdPopover").addEventListener("tap", function (e) {
        e.stopPropagation();
    });
    document.querySelector("#firstPopover").addEventListener("tap", function (e) {
        e.stopPropagation();
    });
//  document.querySelector("#secondPopover").addEventListener("tap", function (e) {
//      e.stopPropagation();
//  });

    mui('body').on('hidden', '.mypopover', function (e) {
    });

    var csm = document.querySelector('body');
    csm.addEventListener('tap', function (event) {
//      btnType1Img.css('backgroundPosition', '-296px -82px');
//        btnTypeImg.css('backgroundPosition', '-40px -80px');
        btnType2Img.css('backgroundPosition', '0 -82px');
        firstPopover.removeClass('active-cont');
//      secondPopover.removeClass('active-cont');
        thirdPopover.removeClass('active-cont');
        return false;
    });
    //按钮点击受损分类
    var bottomShousunfenlei = $(".bottomShousunfenlei");
    //受损分类的滚动事件
    var scrollOption = {
        scrollY: true, //是否竖向滚动
        scrollX: false, //是否横向滚动
        startX: 0, //初始化时滚动至x
        startY: 0, //初始化时滚动至y
        indicators: true, //是否显示滚动条
        deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
        bounce: false //是否启用回弹
    };
    mui('.mui-scroll-wrapper1').scroll(scrollOption);
    mui('.mui-scroll-wrapper').scroll();
    //    document.getElementById("return_yingji").addEventListener('tap', function (event) {
    ////	    本页面是缓存页面,返回上一页面的时候没有关闭,回到本页面再次请求数据,更新chart的时候会提醒以被实例化,不能再次实例化,所以每当返回上一页的时候清除这些事例
    //        //烈度图实例销毁
    //        firstChart.dispose();
    //        //房屋结构图实例销毁
    //        myChartss.dispose();
    //        //usgs1
    //        myChart.dispose();
    //        //usgs2
    //        myChart2.dispose();
    ////		plus.webview.close(plus.webview.currentWebview())   //彻底关闭页面，即使本页面是预加载页面
    //    }, false);
    //Openlayer  geojson   处理插件    到底部全部

    var map = new L.map('bg', {
        center: [37.661515, 78.081428],
        zoom: 7
    });
    var normalm = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
        maxZoom: 18,
        minZoom: 3
    });
    var vec_c = L.layerGroup([normalm]).addTo(map);
    new L.marker([37.228753, 79.479802],{
						icon: L.divIcon({
						className: 'leaflet-echart-icon',
						iconSize: [64, 41],
						iconAnchor:   [13, 60],
						html: '<div  style="position: relative;"><span>2015-7-3</span><img src="images/mak.png"></div>'
					})
		}).on('click', function (e) {
        $('.townname').text('皮山县');
        $('.Affectedtime').children('span').eq(1).text('2015-7-3');
        $('.Affectedcase').children('span').eq(1).text('严重');
        $('.position-slider').html('<div id="slider" class="mui-slider"><div class="mui-slider-group mui-slider-loop"><div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="images/4.jpg" ></a></div><div class="mui-slider-item"><a href="#"><img src="images/1.jpg" data-preview-src="" data-preview-group="1"></a></div><div class="mui-slider-item"><a href="#"><img src="images/2.jpg" data-preview-src="" data-preview-group="1"></a></div><div class="mui-slider-item"><a href="#"><img src="images/3.jpg" data-preview-src="" data-preview-group="1"></a></div><div class="mui-slider-item"><a href="#"><img src="images/4.jpg" data-preview-src="" data-preview-group="1"></a></div><div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="images/1.jpg" ></a></div></div><div class="mui-slider-indicator"><div class="mui-indicator mui-active"></div><div class="mui-indicator"></div><div class="mui-indicator"></div><div class="mui-indicator"></div></div></div>');
        mui.previewImage();
        $('.current-index').text(1);
        
        mypopbox();
    }).addTo(map);
    new L.marker([36.221515, 78.481428],{
						icon: L.divIcon({
						className: 'leaflet-echart-icon',
						iconSize: [64, 41],
						iconAnchor:   [13, 60],
						html: '<div  style="position: relative;"><span>2015-7-4</span><img src="images/mak.png"></div>'
					})
		}).on('click', function (e) {
        $('.townname').text('皮山县');
        $('.Affectedtime').children('span').eq(1).text('2015-7-4');
        $('.Affectedcase').children('span').eq(1).text('严重');
        $('.position-slider').html('<div id="slider" class="mui-slider"><div class="mui-slider-group mui-slider-loop"><div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="images/4.jpg" ></a></div><div class="mui-slider-item"><a href="#"><img src="images/1.jpg" data-preview-src="" data-preview-group="1"></a></div><div class="mui-slider-item"><a href="#"><img src="images/2.jpg" data-preview-src="" data-preview-group="1"></a></div><div class="mui-slider-item"><a href="#"><img src="images/3.jpg" data-preview-src="" data-preview-group="1"></a></div><div class="mui-slider-item"><a href="#"><img src="images/4.jpg" data-preview-src="" data-preview-group="1"></a></div><div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="images/1.jpg" ></a></div></div><div class="mui-slider-indicator"><div class="mui-indicator mui-active"></div><div class="mui-indicator"></div><div class="mui-indicator"></div><div class="mui-indicator"></div></div></div>');
        mui.previewImage();
        $('.current-index').text(1);
        mypopbox();
    }).addTo(map);
    new L.marker([38.071932, 76.219245],{
						icon: L.divIcon({
						className: 'leaflet-echart-icon',
						iconSize: [64, 41],
						iconAnchor:   [13, 60],
						html: '<div  style="position: relative;"><span>2015-7-5</span><img src="images/mak.png"></div>'
					})
		}).on('click', function (e) {
			
			
			
        $('.townname').text('皮山县');
        $('.Affectedtime').children('span').eq(1).text('2015-7-5');                                                                             
        $('.Affectedcase').children('span').eq(1).text('严重');
        $('.position-slider').html('<div id="slider" class="mui-slider"><div class="mui-slider-group mui-slider-loop"><div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="images/4.jpg" ></a></div><div class="mui-slider-item"><a href="#"><img src="images/1.jpg" data-preview-src="" data-preview-group="1"></a></div><div class="mui-slider-item"><a href="#"><img src="images/2.jpg" data-preview-src="" data-preview-group="1"></a></div><div class="mui-slider-item"><a href="#"><img src="images/3.jpg" data-preview-src="" data-preview-group="1"></a></div><div class="mui-slider-item"><a href="#"><img src="images/4.jpg" data-preview-src="" data-preview-group="1"></a></div><div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="images/1.jpg" ></a></div></div><div class="mui-slider-indicator"><div class="mui-indicator mui-active"></div><div class="mui-indicator"></div><div class="mui-indicator"></div><div class="mui-indicator"></div></div></div>');
        mui.previewImage();
        $('.current-index').text(1);
        mypopbox();
    }).addTo(map);
    
//  var popup = L.popup()  
//  .setLatLng([37.228753 + 0.3, 79.479803])  
//  .setContent("2015-7-3")  
//  .addTo(map);
//  var popup1 = L.popup()  
//  .setLatLng([36.221515 + 0.3, 78.481428])  
//  .setContent("2015-7-4")  
//  .addTo(map);
//  var popup2 = L.popup()  
//  .setLatLng([38.071932 + 0.3, 76.219245])  
//  .setContent("2015-7-5")  
//  .addTo(map);
    
//    new L.marker([43.918961, 87.597538]).on('click', function (e) {
//        console.log(2323)
//    }).addTo(map);
//    new L.marker([47.385302, 123.932747]).on('click', function (e) {
//        console.log(2323)
//    }).addTo(map);
//    new L.marker([29.622349, 91.050216]).on('click', function (e) {
//        console.log(2323)
//    }).addTo(map);
    //    L.marker([39.9788, 116.30226]).addTo(map).bindPopup('A pretty CSS3 popup.<br> Easily customizable.');
    $('.leaflet-control-attribution').hide();
    $('.leaflet-control-zoom').hide();
    // create a red polyline from an array of LatLng points
    var latlngs = [
        [37.228753, 79.479802],
        [36.221515, 78.481428],
        [38.071932, 76.219245]
    ];
    var polyline = L.polyline(latlngs, {color: '#a12626', dashArray: '5,5', weight: '2'}).addTo(map);
    // zoom the map to the polyline

    //点击文件进入三级页面
    document.getElementById("first-file").addEventListener('tap', function (event) {
        mui.openWindow({
            url: 'detail.html',
            id: 'detail.html',
            show: {
                autoShow: true,//页面loaded事件发生后自动显示，默认为true
                aniShow: 'pop-in',
                duration: '100'
            },
            styles: {
                popGesture: 'none',
                hardwareAccelerated: true
            },
            waiting: {
                autoShow: true
            }
        });
    }, false);

</script>
</body>
</html>